<template>
	<!-- <view>
		<view @click="login()">
			登录
		</view>
		
		<view @click="toPay">
			支付
		</view>
	</view> -->
	<view class="p-20 page-wrap h-100">
		<view class="title">{{title}}</view>
		
		<view class="official-time">
			<view class="official" @click="jumpOfficial">{{official_name}}</view>
			<view class="time">{{add_time}}</view>
		</view>
		<view class="rich-wrap m-b-40">
			<view v-html="content"></view>
		</view>
		<view v-if="!is_pay" class="pay-btn m-b-40" @click="toPay">付费阅读更多内容</view>
		<view class="btn-wrap m-b-40">
			<view class="read g-flex-bc">
				<view>
					<text v-if="original_text" @click="jump" class="m-r-40 read-source">阅读原文</text>
					<text style="color: #999">阅读 {{read_count}}</text>
				</view>
				<view class="g-flex-c">
					<!-- <view class="g-flex-1 btn-unit m-r-20">
						<text class="iconfont icon-zhuanfa_ m-r-10"></text><text>分享</text>
					</view> -->
					<view v-if="isweixin" class="g-flex-1 btn-unit m-r-20">
						<block v-if="is_zan == 0"><text class="iconfont icon-thumbup m-r-10" @click="articleZan(1)"></text><text>赞{{give_count}}</text></block>
						<block v-else><text class="iconfont icon-thumbup-fill" @click="articleZan(0)"></text><text>赞{{give_count}}</text></block>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isweixin && is_comment" class="m-b-40 new-msg-btn p-20" @click="openMsg">写下你的留言</view>
		<!-- 我的留言 -->
		<view v-if="is_comment" class="message-wrap">
			<!-- <view class="title">精选留言</view> -->
			<view class="m-t-40">
				<template v-for="item in myMsgList">
					<view class="msg-item m-b-40 g-flex-c"  :key="item.id">
						<image :src="item.avatarUrl" class="head-img"></image>
						<view class="info g-flex-1">
							<view class="m-b-10 g-flex-bc">
								<view class="nick-name g-flex-bc">
									<text class="g-flex-1 overflow-1 m-r-10 name-detail">{{item.nickName}}</text>
									<view class="opt-btn-list">
										<text class="blue m-r-10" @click="handlerDel(item)">删除</text> | 
										<text class="blue m-lr-10" @click="handlerReply(item)">回复</text> | 
										<text class="m-l-10">未精选</text>
									</view>
								</view>
							</view>
							<view class="cont">{{item.comment_content}}</view>
						</view>
					</view>
					<view class="sub-item p-l-60 msg-item m-b-40 g-flex-c" v-for="(unit, idx) in item.commentcomment" :key="unit.id * Math.random()">
						<image :src="item.avatarUrl" class="head-img"></image>
						<view class="info g-flex-1">
							<view class="m-b-10 g-flex-bc">
								<view class="nick-name g-flex-bc">
									<text class="g-flex-1 overflow-1 m-r-10 name-detail">{{unit.nickName}}</text>
									<view class="opt-btn-list">
										<text class="blue m-r-10" @click="handlerDel(unit, true)">删除</text> | 
										<text class="m-l-10">未精选</text>
									</view>
								</view>
							</view>
							<view class="cont">{{unit.comment_content}}</view>
						</view>
					</view>
				</template>
				
			</view>
			<view v-if="myMsgList.length > 0" class="m-tb-40 text-center my-msg-tip">以上留言被精选后，将对所有人可见</view>
		</view>
		<!-- 精选留言 -->
		<view v-if="is_comment" class="message-wrap">
			<view class="title">精选留言</view>
			<view class="m-t-40">
				<template v-for="item in msgList">
					<view class="msg-item m-b-40 g-flex-c" :key="item.id">
						<image :src="item.avatarUrl" class="head-img"></image>
						<view class="info g-flex-1">
							<view class="m-b-10 g-flex-bc">
								<view class="nick-name">{{item.nickName}}</view>
								<view v-if="isweixin" class="zan g-flex-c" @click="addZan(item)">
									<text v-if="!isZan(item)" class="iconfont icon-thumbup"></text>
									<text v-else class="iconfont icon-thumbup-fill"></text>
									<text class="m-l-10">{{item.give_count}}</text>
								</view>
							</view>
							<view class="cont">{{item.comment_content}}</view>
						</view>
					</view>
					<view 
						v-for="(unit, idx) in item.commentcomment"
						class=" sub-item p-l-60 msg-item m-b-40 g-flex-c"  
						:key="idx">
						<image :src="item.avatarUrl" class="head-img"></image>
						<view class="info g-flex-1">
							<view class="m-b-10 g-flex-bc">
								<view class="nick-name">{{unit.nickName}}</view>
								<!-- <view v-if="isweixin" class="zan g-flex-c" @click="addZan(unit)">
									<text v-if="!isZan(unit)" class="iconfont icon-thumbup"></text>
									<text v-else class="iconfont icon-thumbup-fill"></text>
									<text class="m-l-10">{{unit.give_count}}</text>
								</view> -->
							</view>
							<view class="cont">{{unit.comment_content}}</view>
						</view>
					</view>
				</template>
				
			</view>
		</view>
		<van-popup
			v-model="show"
			overlay
			position="bottom" 
			@close="show = false" 
			:style="{ width: '100%', height: '80%' }">
			<view class="top g-flex-bc p-lr-20 p-t-20">
				<view style="width: 50px" class="iconfont icon-x" @click="show = false"></view>
				<text class="dialog-title">写留言</text>
				<van-button size="small" type="primary" :disabled="!message" @click="subMessage">{{ !replyObj ? '提交' : '回复' }}</van-button>
			</view>
			<view class="origin-msg m-tb-40 p-20 m-lr-20" v-if="replyObj">
				{{replyObj.nickName}}: {{replyObj.comment_content}}
			</view>
			<view class="msg-cont m-b-30 p-20">
				<textarea class="input-wrap" :value="message" placeholder="请输入留言内容" @input="handlerChange" placeholder-style="font-size: 28upx; color: #999" />
			</view>
		</van-popup>
	</view>
</template>

<script>
	import { Popup, Button, Overlay } from 'vant'
	import { getArticle,addComment,addFavorite,cancelFavorite,paginateComment,addCommentFavorite,cancelCommentFavorite,addOrder,wxPay, deleteComment, deleteCommentComment, addCommentComment, paginateMyComment } from '../../api/api'
	
	export default {
		components: {
			VanPopup: Popup, 
			VanButton: Button,
			VanOverlay: Overlay
		},
		data() {
			return {
				isweixin:'',
				id:0,
				account:'',
				is_comment:0,
				is_zan:0,
				is_pay:0,
				title:'',
				content:'',
				author:'',
				read_count:0,
				give_count:0,
				official_name:'',
				official_link:'',
				original_text:'',
				add_time:'',
				
				show: false,
				message: '',
				msgList: [
					
				],
				myMsgList: [],
				replyObj: null
			}
		},
		computed: {
			isZan() {
				return function(data) {
					if (data && data.commentfavorite && data.commentfavorite.length > 0) {
						return true
					} else {
						return false
					}
				}
			}
		},
		onLoad(query){
			
			this.id = query.id || 1
			
			this.isweixin = this.isWeiXin()
			console.log(query,'query')
			console.log(query.account,'query.account')
			if(query.account != undefined){
				this.account = query.account
				uni.setStorageSync('account', query.account);
			}else{
				var account = uni.getStorageSync('account')
				if(!account && this.isweixin){
					this.login()
				}else{
					this.account = account
				}
			}
			this.getArticle()
			this.paginateComment()
		},
		watch: {
			show(val) {
				if (!val) {
					this.replyObj = null
				} else {
					this.message = ''
				}
			}
		},
		methods: {
			
			//判断是否是微信浏览器的函数
			isWeiXin(){
			  //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
			  var ua = window.navigator.userAgent.toLowerCase();
			  //通过正则表达式匹配ua中是否含有MicroMessenger字符串
			  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
				return true;
			  }else{
				return false;
			  }
			},
			//跳转阅读原文链接
			jump(){
				console.log()
				window.location.href=""+this.original_text
			},
			
			//跳转公众号链接
			jumpOfficial(){
				window.location.href=""+this.official_link
			},
			
			//获取文章
			getArticle(){
				var account = this.account
				var id      = this.id
				getArticle({account,id}).then(res => {
					console.log(res,'res')
					if(res.code == 200){
						this.title = res.data.title
						this.content = res.data.content
						this.author = res.data.author
						this.read_count = res.data.read_count
						this.give_count = res.data.give_count
						this.is_comment = res.data.is_comment
						this.official_name = res.data.official_name
						this.official_link = res.data.official_link
						this.original_text = res.data.original_text
						this.add_time = res.data.add_time
						this.is_zan = res.data.is_zan
						this.is_pay = res.data.is_pay
						
					}
				})
			},
			
			//弹出评论框
			openMsg() {
				if(this.isLogin()){
					this.show = true
					this.message = ''
				}else{
					console.log('denglu')
					// this.login()
				}
			},
			//评论内容
			handlerChange(data) {
				this.message = data.detail.value
			},
			//评论
			async subMessage() {
				var account = this.account
				var article_id = this.id
				var comment_content = this.message
				let res = null
				if (!this.replyObj) {
					res = await addComment({account,article_id,comment_content})
				} else {
					res = await addCommentComment({ comment_id: this.replyObj.id, comment_content, account })
				}
				if(res.code == 200){
					uni.showToast({
					    title: '评论成功',
					    duration: 1000,
						icon:'none'
					});
				}
				
				this.show = false
				this.paginateMyComment()
			},
			//文章点赞
			articleZan(flag){
				if(this.isLogin()){
					var account    = this.account
					var article_id = this.id
					if(flag == 1){
						addFavorite({account,article_id}).then(res => {
							this.is_zan = 1
							this.give_count = parseInt(this.give_count) +1 
						})
					}else{
						cancelFavorite({account,article_id}).then(res => {
							this.is_zan = 0
							this.give_count = parseInt(this.give_count) -1
						})
					}
				}else{
					console.log('denglu')
					// this.login()
				}
				
				
			},
			//查询我的评论
			paginateMyComment(){
				var account    = this.account
				var article_id = this.id
				var page = 1
				var limit = 10
				// var msgList = this.msgList
				paginateMyComment({account,article_id,page,limit}).then(res => {
					this.myMsgList = res.data.mydata
				})
			},
			
			//查询评论
			paginateComment(){
				var account    = this.account
				var article_id = this.id
				var page = 1
				var limit = 10
				var msgList = this.msgList
				paginateComment({account,article_id,page,limit}).then(res => {
					console.log(res,'res12')
					var info = res.data.data
					// for(var i =0;i<info.length;i++){
					// 	var result = info[i]
					// 	var isZan = result.commentfavorite.length > 0 ? true : false
					// 	var data = {
					// 		id: result.id,
					// 		head_img: result.avatarUrl,
					// 		nickName: result.nickName,
					// 		zan: result.give_count,
					// 		isZan: isZan,
					// 		cont: result.comment_content
					// 	}
					// 	msgList.push(data)
					// }
					this.msgList = info
					this.myMsgList = res.data.mydata
				})
			},
			
			//评论点赞
			addZan(data) {
			    if(this.isLogin()){
			     var account    = this.account
			     var comment_id = data.id
			     if (data && data.commentfavorite && data.commentfavorite.length > 0) {
			      cancelCommentFavorite({account,comment_id}).then(res => {
			       // data.zan -= 1
			       // data.isZan = false
			       this.paginateComment()
			      })
			      
			     } else {
			      addCommentFavorite({account,comment_id}).then(res => {
			       // data.zan += 1
			       // data.isZan = true
			       this.paginateComment()
			      })
			      
			     }
			    }else{
			     console.log('denglu')
			     // this.login()
			    }
			},
			
			 //判断是否已授权
			isLogin(){
				var account = uni.getStorageSync('account')
				if(!account){
					return false
				}
				return true
			 },
			//授权
			login(){
				var id = this.id
				window.location.href = 'http://ffyd.lazycatbuy.com/api/we/oauth?id='+id
				
			},
			
			
			toPay(){
				var isweixin = this.isWeiXin()
				if(isweixin == false){
					uni.showToast({
					    title: '请在微信中打开',
					    duration: 1000,
						icon:'none'
					});
					return false
				}
				
				if(!this.isLogin()){
					this.login()
					return false
				}
					var account    = this.account
					var id = this.id
					uni.showLoading({title: '支付加载中~'});
				
					addOrder({account,id})
					.then(res => {
						console.log(res,22)
						if(res.code === 200) {
							
								console.log(res,1111)
								let { appId, timeStamp, nonceStr, signType, paySign } = res.data
									WeixinJSBridge.invoke(
										'getBrandWCPayRequest', {
											"appId": appId,     //公众号名称，由商户传入     
											"timeStamp": timeStamp,         //时间戳，自1970年以来的秒数     
											"nonceStr": nonceStr, //随机串     
											"package": res.data.package,     
											"signType": signType,         //微信签名方式：     
											"paySign": paySign//微信签名 
										},
										function(res){
											console.log(res,55)
											if(res.err_msg == "get_brand_wcpay_request:ok" ){
												location.reload();
											}else {
												// uni.showToast({title:'网络错误',icon:'none'});	
											}
									}); 			
						}
					})
			},
			handlerDel(data, isSub) {
				const that = this
				uni.showModal({
					title: '确定删除留言吗？',
					confirmText: '删除',
					async success(res) {
						if (res.confirm) {
							if (isSub) {
								await deleteCommentComment({id: data.id})
							} else {
								await deleteComment({id: data.id})
							}
							that.paginateMyComment()
						} else if (res.cancel) {
								console.log('用户点击取消');
						}
					}
				})
			},
			handlerReply(data) {
				console.log(data)
				this.replyObj = data
				this.show = true
			}
		}
	}
</script>
<style>
	@import 'vant/lib/index.css';
</style>

<style lang="scss" scoped>
	$blue: #576b95;
	.title{
		font-size: 22px;
		line-height: 1.4;
		margin-bottom: 14px;
		font-weight: 400;
	}
	.official-time{
		display: flex;
		align-items: center;
		margin-bottom: 14px;
		.official{
			color: $blue;
		}
		.time{
			margin-left: 30upx;
			font-size: 24upx;
			color: #666;
		}
	}
	
	.pay-btn{
		display: flex;
		justify-content: center;
		color: #C0C4CC;
	}
	.rich-wrap {
		image {
			width: 100%;
			height: auto;
			display: block;
		}
	}
	.new-msg-btn {
		color: #999999;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.message-wrap {
		.title {
			color: #999999;
			font-size: 28upx;
		}
		.msg-item {
			color: #333333;
			font-size: 24upx;
			.head-img {
				width: 60upx;
				height: 60upx;
				border-radius: 10upx;
				margin-right: 20upx;
			}
			.nick-name {
				color: #999999;
				width: 100%;
			}
			.zan {
				color: $blue;
			}
			.cont {
				line-height: 40upx;
				white-space: wrap;
			}
		}
	}
	.read-source, .btn-unit {
		color: $blue;
	}
	
	.dialog-title {
		color: #000;
		font-size: 32upx;
	}
	
	.my-msg-tip {
		font-size: 24upx;
		color: #ccc;
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
		&::after, &::before {
			content: "";
			position: absolute;
			background-color: #ccc;
			width: 40upx;
			height: 2upx;
			top: 50%;
			transform: translateY(-50%);
		}
		&::after {
			right: -60upx;
		}
		&::before {
			left: -60upx;
		}
	}
	.blue {
		color: $blue;
	}
	.opt-btn-list {
		font-size: 24upx;
		color: #999999;
	}
	.name-detail {
		max-width: 50%;
	}
	.info {
		width: calc(100% - 80upx);
	}
	.origin-msg {
		background-color: #f7f7f7;
		color: #999999;
		font-size: 24upx;
		line-height: 38upx;
	}
	.input-wrap {
		width: 100%;
		// height: 60%;
	}
</style>

